<template>
  <!--卡片图层管理-->
  <div id="card_content" class="card_table" :style="cardDefault">
    <a id="tianditu" title="天地图" @click="chooseTianditu"></a>
    <a id="baidu" title="卫星地图" @click="chooseWeixin"></a>
    <a id="superM" title="高德地图" @click="chooseGaode"></a>
    <span>当前地图</span>
  </div>
</template>

<script>
/*import store from "../store";*/


import store from "../store";

export default {
  name: "LayerManage",
  data(){
    return {
      /*图片管理器--图片样式*/
      cardDefault:{backgroundImage:'url("src/images/天地图 .png")'},
      cardImage1:{backgroundImage:'url("src/images/天地图 .png")'},
      cardImage2:{backgroundImage:'url("src/images/天眼卫星图标.svg")'},
      cardImage3:{backgroundImage:'url("src/images/高德地图.png")'},
    }
  },
  methods: {
      chooseTianditu() {
        let layer=[];
        let layerName=[];
        let layerVisibility=[];
        let map=this.$store.state.map
        let layers=map.getLayers();
        console.log(layers.getLength())
        for(let i=0;i<layers.getLength();i++) {
            layer[i] = layers.item(i);
            layerName[i] = layer[i].get('title');
            layerVisibility[i] = layer[i].getVisible();
            if(layerName[i]!=='天地图'
                &&layerName[i]!=='天地图标注'
            ){
              layer[i].setVisible(false);
            }
            else{
              layer[i].setVisible(true);
            }
          }
          store.commit('changeMap',map)
          this.cardDefault=this.cardImage1
        },
      chooseWeixin() {
        let layer=[];
        let layerName=[];
        let layerVisibility=[];
        let map=this.$store.state.map
        let layers=map.getLayers();
        console.log(layers.getLength())
        for(let i=0;i<layers.getLength();i++) {
          layer[i] = layers.item(i);
          layerName[i] = layer[i].get('title');
          layerVisibility[i] = layer[i].getVisible();
          if(layerName[i]!=='高德卫星图'
          ){
            layer[i].setVisible(false);
          }
          else{
            layer[i].setVisible(true);
          }
        }
        store.commit('changeMap',map)
        this.cardDefault=this.cardImage2
      },
      chooseGaode() {
        let layer=[];
        let layerName=[];
        let layerVisibility=[];
        let map=this.$store.state.map
        let layers=map.getLayers();
        console.log(layers.getLength())
        for(let i=0;i<layers.getLength();i++) {
          layer[i] = layers.item(i);
          layerName[i] = layer[i].get('title');
          layerVisibility[i] = layer[i].getVisible();
          if(layerName[i]!=="高德地图"
          ){
            layer[i].setVisible(false);
          }
          else{
            layer[i].setVisible(true);
          }
        }
        store.commit('changeMap',map)
        this.cardDefault=this.cardImage3
      }
    }
}
</script>

<style>
/*卡片地图管理图层*/
.card_table{
  z-index: 2;
  position: absolute;
  display: flex;
  justify-content:flex-end;
  overflow: hidden;
  width: 120px;
  height: 120px;
  right:3rem;
  bottom: 2.5rem;
  align-items:flex-start;
/*  background-image: url("../images/高德地图.png") ;*/
  background-repeat: no-repeat;
  background-position: right;
  background-size: 6em;
}
.card_table:hover{
  width: 400px;
}
/*当前地图标记样式*/
.card_table span{
  position: fixed;
  right: 55px;
  color: #000000;
  background-color: rgba(218, 171, 171, 0.21);
  font-family: 楷体;
  font-size: medium ;
}
/*标记a的样式*/
.card_table a{
  position: relative;
  top:20px;
  width: 80px;
  height: 80px;
  right: 120px;
  margin-left: 20px;
  margin-right: 0px;
  align-items: flex-end;
}
/*设计每个标记中的图标样式*/
.card_table a:nth-child(1){
  background-image: url("../images/天地图 .png")  ;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.card_table a:nth-child(2){
  background-image: url("../images/天眼卫星图标.svg") ;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.card_table a:nth-child(3){
  background-image: url("../images/高德地图.png") ;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
/*鼠标悬浮展开列表*/
.card_table a:hover{
  box-shadow: inset 0 0 0 2000px rgba(100, 81, 122, 0.3);
}
</style>